<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- basic styles -->
        <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="../assets/css/font-awesome.min.css" />
        <link rel="stylesheet" href="../assets/css/ace.min.css" />
        <link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
        <link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
    </head>
    <body>
        <div class="main-container">
            <div class="col-xs-12">
                <h3 class="header smaller lighter blue">IP地址库管理</h3>
                <div style="padding-bottom: 5px;">
                    <button class="btn btn-info" onclick='addBox()'>添加数据</button>
                    <button class="btn btn-success" onclick='unloadBox()'>导入数据</button>
                    <button class="btn btn-danger" onclick='delAll()'>清空数据</button>
                </div>
                <div class="table-header">
                    IP地址库列表
                </div>
                <div class="table-responsive">
                    <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                    </table>
                </div>
            </div>
        </div>
        <script src="../assets/js/jquery.js"></script>
        <script src="../assets/js/bootstrap.min.js"></script>
        <!-- page specific plugin scripts -->
        <script src="../assets/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="../assets/js/jquery.dataTables.min.js"></script>
        <script src="../assets/js/jquery.dataTables.bootstrap.js"></script>
        <script src="../assets/js/jquery.slimscroll.min.js"></script>
        <script src="../assets/js/jquery.validate.js"></script>
        <script src="../assets/js/jquery.validate-util.js"></script>
        <script src="../assets/js/ace-elements.min.js"></script>
        <script type="text/javascript">
                        $(function() {
                            var oTable1 = $('.table').dataTable({
                                "bFilter": false,
                                "bSort": false,
                                "bProcessing": true,
                                "bServerSide": true,
                                "sAjaxSource": "../action/common/get_ip_bank.do",
                                "sAjaxDataProp": "aaData",
                                "aoColumns": [
                                    {"sTitle": "ID"},
                                    {"sTitle": "IP Address Type"},
                                    {"sTitle": "IP Address Range Start_IP"},
                                    {"sTitle": "IP Address Range End_IP"},
                                    {"sTitle": "AreaName"},
                                    {"sTitle": "操作"}
                                ]
                            });
                        })
                        function delectObj(id) {
                            $.ajax({
                                type: "POST",
                                async: false,
                                url: "../action/common/del_ip_bank.do",
                                data: {ids: id},
                                dataType: "json",
                                success: function(data) {
                                    //obj = data;
                                    if (data) {
                                        alert("删除成功!")
                                    } else {
                                        alert("删除失败!")
                                    }
                                }
                            });
                            window.location.reload();
                        }
                        function delAll() {
                            $.ajax({
                                type: "POST",
                                async: false,
                                url: "../action/common/del_all.do",
                                data: {type: 7},
                                dataType: "json",
                                success: function(data) {
                                    //obj = data;
                                    if (data) {
                                        alert("数据已清空!")
                                    } else {
                                        alert("数据清空失败!")
                                    }
                                }
                            });
                            window.location.reload();
                        }
                        function onloadFile() {
                            var fileObj = $("input:file")[0].files[0];
                            var type = fileObj.name.split(".")[1];
                            if (fileObj === undefined) {
                                alert("请选择文件!");
                                return;
                            }
                            var form = new FormData();
                            form.append("file", fileObj);
                            var xhr = new XMLHttpRequest();
                            xhr.open("post", "../action/common/read_ip_bank.do", true);
                            xhr.onreadystatechange = function() {
                                if (xhr.readyState == 4) {
                                    if (xhr.status == 200) {
                                        var flag = xhr.responseText;
                                        if (flag.indexOf("true") == 0) {
                                            alert("导入成功!")
                                            closeBox();
                                            window.location.reload();
                                        } else {
                                            alert("导入失败!")
                                        }
                                    }
                                }
                            }
                            xhr.send(form);
                        }
                        function add() {
                            var form = $("#modal-step1 .form-horizontal").validate();
                            if (!form.form()) {
                                return;
                            }
                            var content = [];
                            var contentObj = {
                                IPType: $("#IPType").val(),
                                startIP: $("#startIP").val(),
                                endIP: $("#endIP").val(),
                                areaName: $("#areaName").val()
                            };
                            content.push(contentObj);
                            $.ajax({
                                type: "POST",
                                async: false,
                                url: "../action/common/add_ip_bank.do",
                                data: {content: JSON.stringify(content)},
                                dataType: "json",
                                success: function(data) {
                                    //obj = data;
                                    if (data) {
                                        alert("添加成功!")
                                    } else {
                                        alert("添加失败!")
                                    }
                                }
                            });
                            window.location.reload();
                        }
                        //盒子
                        function unloadBox() {
                            closeBox();
                            var cont = '';
                            cont += "<div id='modal-wizard' class='modal'>";
                            cont += "            <div class='modal-dialog'>";
                            cont += "                <div class='modal-content'>";
                            cont += "                    <div class='modal-header' data-target='#modal-step-contents'>";
                            cont += "                        <h3>IP地址库管理</h3>";
                            cont += "                    </div>";
                            cont += "                    <div class='modal-body step-content' id='modal-step-contents'>";
                            cont += "                        <div class='' id='modal-step1'>";
                            cont += "                            <div class='center'>";
                            cont += "                                <form class='form-horizontal'>";
                            cont += "                                    <div class='form-group'>";
                            cont += "                                        <label for='' class='col-sm-3 control-label no-padding-right' style='padding-top: 2px;'>请选择上传文件：</label>";
                            cont += "                                        <div class='col-sm-9'>";
                            cont += "                                            <input type='file'  id='name' name='1' required>";
                            cont += "                                        </div>";
                            cont += "                                    </div>";
                            cont += "                                </form>";
                            cont += "                            </div>";
                            cont += "                        </div>";
                            cont += "                    </div>";
                            cont += "                    <div class='modal-footer wizard-actions'>";
                            cont += "                        <button class='btn btn-success btn-sm btn-next save' data-last='完成 ' onclick='onloadFile()'>";
                            cont += "                            完成";
                            cont += "                            <i class='icon-ok'></i>";
                            cont += "                        </button>";
                            cont += "                        <button class='btn btn-danger btn-sm pull-left' data-dismiss='modal'>";
                            cont += "                            <i class='icon-remove'></i>";
                            cont += "                            取消";
                            cont += "                        </button>";
                            cont += "                    </div>";
                            cont += "                </div>";
                            cont += "            </div>";
                            cont += "        </div>";
                            $("body").append(cont);
                            $('#modal-wizard').modal("show");
                        }
                        function addBox() {
                            closeBox();
                            var cont = '';
                            cont += "<div id='modal-wizard' class='modal'>";
                            cont += "            <div class='modal-dialog'>";
                            cont += "                <div class='modal-content'>";
                            cont += "                    <div class='modal-header' data-target='#modal-step-contents'>";
                            cont += "                        <h3>IP地址库管理</h3>";
                            cont += "                    </div>";
                            cont += "                    <div class='modal-body step-content' id='modal-step-contents'>";
                            cont += "                        <div class='' id='modal-step1'>";
                            cont += "                            <div class='center'>";
                            cont += "                                <form class='form-horizontal'>";
                            cont += "                                    <div class='form-group'>";
                            cont += "                                        <label for='IPType' class='col-sm-6 control-label no-padding-right' style='padding-top: 2px;'>IP Address Type：</label>";
                            cont += "                                        <div class='col-sm-6'>";
                            cont += "                                            <select id='IPType' class='col-sm-8'><option value='1'>IPv4</option><option value='0'>IPv6</option></select>";
                            cont += "                                        </div>";
                            cont += "                                    </div>";
                            cont += "                                    <div class='form-group'>";
                            cont += "                                        <label for='startIP' class='col-sm-6 control-label no-padding-right' style='padding-top: 2px;'>IP Address Range Start_IP：</label>";
                            cont += "                                        <div class='col-sm-6'>";
                            cont += "                                            <input type='text'  id='startIP' name='2' class='col-sm-8' required>";
                            cont += "                                        </div>";
                            cont += "                                    </div>";
                            cont += "                                    <div class='form-group'>";
                            cont += "                                        <label for='endIP' class='col-sm-6 control-label no-padding-right' style='padding-top: 2px;'>IP Address Range End_IP：</label>";
                            cont += "                                        <div class='col-sm-6'>";
                            cont += "                                            <input type='text'  id='endIP' name='3' class='col-sm-8' required>";
                            cont += "                                        </div>";
                            cont += "                                    </div>";
                            cont += "                                    <div class='form-group'>";
                            cont += "                                        <label for='areaName' class='col-sm-6 control-label no-padding-right' style='padding-top: 2px;'>AreaName：</label>";
                            cont += "                                        <div class='col-sm-6'>";
                            cont += "                                            <input type='text'  id='areaName' name='3' class='col-sm-8' required>";
                            cont += "                                        </div>";
                            cont += "                                    </div>";
                            cont += "                                </form>";
                            cont += "                            </div>";
                            cont += "                        </div>";
                            cont += "                    </div>";
                            cont += "                    <div class='modal-footer wizard-actions'>";
                            cont += "                        <button class='btn btn-success btn-sm btn-next save' data-last='完成 ' onclick='add()'>";
                            cont += "                            完成";
                            cont += "                            <i class='icon-ok'></i>";
                            cont += "                        </button>";
                            cont += "                        <button class='btn btn-danger btn-sm pull-left' data-dismiss='modal'>";
                            cont += "                            <i class='icon-remove'></i>";
                            cont += "                            取消";
                            cont += "                        </button>";
                            cont += "                    </div>";
                            cont += "                </div>";
                            cont += "            </div>";
                            cont += "        </div>";
                            $("body").append(cont);
                            $('#modal-wizard').modal("show");
                        }
                        //关闭盒子
                        function closeBox() {
                            $('#modal-wizard').modal("hide");
                            $('#modal-wizard').remove();
                        }
        </script>
    </body>
</html>